<template>
    <div class="box" ref="modal">
        <Top class="top" :title="toUser.name" ></Top>
        <div class="list">
            <div v-for="item in list" :key="item.id">
              <div class="info">
                  {{ item.value }}
              </div>
          </div>
        </div>
        <div class="chat-box">
                <button class="add" @click="show">+</button>
                <input type="text" v-model="inputValue">
                <button class="send" @click="send">发送</button>
            </div>
        <!-- 点击加号弹框 -->
        <Bottom v-show="showBottom" @click="close"></Bottom>
        <Tan />
    </div>

</template>
<script setup>
import Bottom from '../../components/Bottom.vue'
import Tan from '../../components/Tan.vue'
import Top from "../../components/top.vue"
import { ref, inject, provide,reactive } from 'vue'
import {useRoute} from "vue-router"
const route=useRoute()
const toUser=route.query
// console.log(toUser);
// import userModule from '../../stores/counter'
// const userStore = userModule()
const showBottom = ref(false)
const inputValue=ref('')
// const toUser=reactive({})
// console.log(toUser);
const modal=ref()
const list=reactive([])

// 点击发送
const send=()=>{
   list.push({
    value:inputValue.value
   })
   console.log(list);
   inputValue.value=''
}
// 点击加号显示弹框
const show = () => {
    showBottom.value = !showBottom.value
}
// 接收close事件
inject('close', (value) => {
    showBottom.value = value
})
const close = () => {
    showBottom.value = false
}
const shows = ref(false)
provide('shows', shows)
provide("toUser", toUser)
// console.log(shows);
</script>
<style scoped>
* {
    margin: 0;
    padding: 0;
}

.box {
    width: 100vw;
    height: 100vh;
    background-color: rgb(241, 241, 241);
}

.list {
    height: calc(100vh - 10vh -10vh);
    overflow: auto;
}
.list  {
  width: 100%;
  display: flex;
}

.list .item+.item {
  margin-top: 10px;
}

.item.right {
  justify-content: flex-end;
}

.list .info {
  max-width: 100px;
  box-sizing: border-box;
  border-radius: 10px;
  padding: 10px;
  background-color: #a9e87a;
  margin-left:300px;
  /* overflow: hidden; */
}

.item.left {
  justify-content: flex-start;
}

.item.left .info {
  max-width: 200px;
  box-sizing: border-box;
  border-radius: 10px;
  padding: 10px;
  background-color: #fff;
}
.chat-box {
    width: 100%;
    height: 10vh;
    background-color: white;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    bottom: 0;
}

.top {
    width: 100vw;
    height: 10vh;
}

.add {
    width: 10vw;
    height: 5vh;
    border-radius: 30px;
    border: 2px solid rgb(241, 241, 241);
    background-color: rgb(241, 241, 241);
    font-size: 16px;
}

.send {
    width: 15vw;
    height: 5vh;
    border-radius: 5px;
    border: 2px solid rgb(241, 241, 241);
    background-color: rgb(241, 241, 241);
    font-size: 14px;
}

input {
    width: 60vw;
    height: 5vh;
    border-radius: 5px;
    border: 1px solid rgb(241, 241, 241);
    outline: none;
}
</style>